<template>
  <div class="filter">
    <div class="filter_item">
      姓名：<Input prefix="ios-contact" clearable   placeholder="Enter name" style="width: auto" v-model="userName" />  
     </div>
    <div class="filter_item">
      楼层：<Select v-model="roomFloor"clearable style="width:200px" @on-open-change="getRoomFloor" @on-change="getFloorChange">
        <Option v-for="item in floors" :value="item" :key="item">{{item}}</Option>
    </Select> 
     </div>
     <div class="filter_item">
     房号：<Select v-model="roomNumber"clearable style="width:200px" @on-open-change="getRoomNumber" @on-change="getNumberChange">
        <Option v-for="item in numbers" :value="item" :key="item">{{ item}}</Option>
    </Select>
     </div>
     <div class="filter_item">
    入住时间：<DatePicker type="daterange" split-panels placeholder="Select date" style="width: 200px" @on-change="dateChange"></DatePicker>
     </div>
     <div class="filter_item"> 
       <Button  type="primary" @click="getAllHistory">查询</Button>
     </div>
     <div class="filter_item">
      <div class="table">
     <Table ref="table" :columns="roomColumns" :data="roomList" border></Table>
     </div>
     <div class="page">
     <Page :total=total  @on-change="pageChange" show-elevator />
     </div>
     </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data(){
    return{
      roomFloor:0,
      floors:[],
      roomNumber:0,
      numbers:[],
      userName:"",
      rzdata:[],
      pageNo:1,
      total:0,
      roomList:[],
      roomColumns:[
        {
             type: "index",
             title: "序号",
             align: "center"
        },
        {
             key: "roomFloor",
             title: "楼层",
             align: "center"
        },
        {
             key: "roomNumber",
             title: "房号",
             align: "center"
        },
        {
             key: "userName",
             title: "住客姓名",
             align: "center"
        },
        {
             key: "rzDate",
             title: "入住时间",
             align: "center",
             rander:(h,params) =>{
               let date = new Date(params.row.rzDate).getTime;
               return h(date
              );
             }
        },
        {
             key: "leaveDate",
             title: "退房时间",
             align: "center"
        },
        {
             key: "price",
             title: "总价",
             align: "center"
        }
      ]
    }
  },
  methods:{
     getRoomFloor(){
       axios.post("/api/room/getRoomFloor",null)
       .then(res =>{
         this.floors=res.data.data;
         console.log(this.floors);
       })
     },
     getRoomNumber(){
       axios.post("/api/room/getRoomNumber",{
         roomFloor:this.roomFloor
         })
       .then(res =>{
         let data =res.data.data;
         this.numbers=data;
       })
     },
     pageChange(e){
       this.pageNo=e;
       this.getAllHistory();
     }, 
     getFloorChange(e){
       this.roomFloor = e;
     },
     getNumberChange(e){
       this.roomNumber=e;
     },
     dateChange(e){
       this.rzdata=e;
     },
     getAllHistory(){
       axios.post("/api/history/getAllHistory",{
         userName:this.userName?this.userName:null,
         roomNumber:this.roomNumber?this.roomNumber:null,
         rzBegin:this.rzdata[0]?this.rzdata[0]:null,
         rzEnd:this.rzdata[0]?this.rzdata[1]:null,
         pageNo:this.pageNo
       })
       .then(res =>{
         let page = res.data.data;
         this.roomList = page.pageList;
         console.log(this.roomList);
         this.total = page.recordCount;
       })
     }
  }
}
</script>

<style>
.filter{
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item{
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table{
  margin-top: 30px;
  width: 1500px;
}
.page{
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>